<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文章详情页</title>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="../static/js/bootstrap.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3 text-justify-center">
    <h1 class="text-primary" th:text="${article.getTitle()}">标题</h1>
    <p th:text="${article.getContent()}">内容</p>
    <pre class="text-info" th:text="|本文创建于${#dates.format(article.getDate())} 分类:${article.getCategory()}|">信息</pre>

    <h2>评论</h2>
    <ul class="list-group">
        <li class="list-group-item" th:each="comment:${comments}">
            <p class="text-success" th:text="${comment.getContent()}">内容</p>
            <pre th:text="|评论时间${#dates.format(comment.getDate())} 作者:${comment.getAuthor()}|">信息</pre>
        </li>
    </ul>

    <form th:action="'/article/'+${article.getId()}+'/comment'" method="post">
        <div class="mb-3 mt-3">
            <label for="content">请输入评论:</label>
            <textarea class="form-control" rows="5" id="content" name="content" required></textarea>
        </div>
        <div class="mb-3">
            <label for="author" class="form-label">作者:</label>
            <input type="text" class="form-control" id="author" name="author" required>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
        <a class="nav-link" th:href="@{/}">返回首页</a>
    </form>

</div>
</body>
</html>